<template>
  <div class="pd-10" ref="tableWrap">
    <el-table
      v-if="height"
      ref="layoutTable"
      :data="tableData"
      :key="table?.rowKey"
      :stripe="table?.stripe"
      :border="table?.border"
      :size="table?.size"
      :highlightCurrentRow="table?.highlightCurrentRow"
      style="width: 100%"
      :height="height - 20"
    >
      <el-table-column
        v-for="column in tableColumns"
        :prop="column.prop"
        :label="column.lable"
        :width="column.width || 'auto'"
        :min-width="column.minWidth"
        :formatter="column.formatter"
        :fixed="column.fixed"
        :align="column.align"
        :show-overflow-tooltip="column.showToolTip"
      >
        <template #default="scope">
          <template v-if="column.switch">
            <el-switch
              v-model="scope.row[column.prop]"
              inline-prompt
              :active-icon="Check"
              :inactive-icon="Close"
              :active-value="0"
              :inactive-value="1"
              @change="switchChange($event, scope.row, column.actionHandler)"
            >
            </el-switch>
          </template>
          <template v-else>
            <span>{{ cellShow(scope.row, column) }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        v-if="operations && operations.length"
        width="160px"
        fixed="right"
      >
        <template #header>操作</template>
        <template #default="scope">
          <template v-if="operations.length <= 2">
            <span
              v-for="item in operations"
              :style="{ color: item.color ? item.color : '#00B4ED' }"
              @click="item.actionHandler(scope.row)"
              class="mr-10"
            >
              {{ item.name }}
            </span>
          </template>
          <template v-else>
            <span
              v-for="item in operations.slice(0, 2)"
              :style="{ color: item.color ? item.color : '#00B4ED' }"
              @click="item.actionHandler(scope.row)"
              class="mr-10"
            >
              {{ item.name }}
            </span>
            <el-dropdown trigger="click">
              <span style="color: #00b4ed"
                >更多<el-icon class="el-icon--right"><arrow-down /></el-icon
              ></span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="item in operations.slice(2)"
                    @click="item.actionHandler(scope.row)"
                  >
                    <span style="color: #00b4ed">{{
                      item.name
                    }}</span></el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, Ref, ref } from "vue";
import { Column, Table, Operation } from "../../type/table";
import { formatDate } from "../../utils/dateUtils";
import { Check, Close } from "@element-plus/icons-vue";
interface TableProps {
  table?: Table;
  tableData: Array<any>;
  tableColumns: Array<Column>;
  operations: Array<Operation>;
}
const props = withDefaults(defineProps<TableProps>(), {
  table: Object as () => {
    stripe: true;
    border: false;
    highlightCurrentRow: true;
    rowKey: "id";
  },
});
const height = ref(0);
const tableWrap: Ref<HTMLFormElement | null> = ref(null);
onMounted(() => {
  height.value = tableWrap.value?.offsetHeight ?? 0;
});
const cellShow = (row: any, column: Column) => {
  let cellDate = column.prop ? row[column.prop] : null;
  if (cellDate && column.dateFormat) {
    return formatDate(column.dateFormat, new Date(cellDate));
  }
  return cellDate ?? "";
};
const switchChange = (val: number, data: any, actionHandler: any) => {
  actionHandler(val, data);
};
</script>

<style lang="scss" scoped>
.el-dropdown-menu {
  padding: 0;
  .el-dropdown-menu__item {
    padding: 0 10px;
  }
  .el-dropdown-menu__item:focus,
  .el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: #fff;
  }
}
</style>
